<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div class="topBox"></div>
		<div class="avaerTopBox f f-a-c f-j-b">
			<div class="leftAva f f-a-c f-d-c f-j-c">
				<div class="p-r">
					<img :src="obj.avatar || '/src/assets/tou.png'" class="avart" alt="" />
					<img v-if="obj.favorite" src="/src/assets/user/5.png" class="iconImg p-a" alt="" />
				</div>
				<button class="btn">Chat</button>
			</div>
			<div class="avaRig">
				<div class="topTitle f f-a-c f-j-b">
					<div class="topLeft f f-a-c">
						{{ obj.firstName }} {{ obj.lastName }}
						<div class="review">{{ obj.level }} / 5(Review: {{ total }})</div>
					</div>
					<div @click="addInfo(1)" style="background-color: #f7f7f9; color: #8590a1" v-if="obj.favorite" class="rigIcon hand boxShow f f-a-c f-j-c">
						<img src="/src/assets/user/12Hui.png" class="imgIcon" alt="" />Added
					</div>
					<div @click="addInfo(1)" v-else class="rigIcon hand boxShow f f-a-c f-j-c"><img src="/src/assets/user/13.png" class="imgIcon" alt="" />Add</div>
				</div>
				<!-- Response Time: Within 8h -->
				<div class="Response f f-a-c">
					<div class="responseItem">Response Time: Within {{ obj.responseTime }}h</div>
					<div class="responseItem">Attendance rate: {{ obj.attendanceRate }}%</div>
					<!-- timeAgo(lastLogin) -->
					<div class="responseItem">Last seen: {{ timeAgo(obj.lastLogin) }}</div>
				</div>
				<div class="investor">{{ joip }}</div>
				<!-- Topics:  -->
				<div class="topics f f-a-c">
					<div class="topicsLef">Topics:</div>
					<div v-for="(item, index) in obj.topicNames" :key="index" class="topicsRight hand">{{ item }}</div>
				</div>
				<!-- Language:  -->
				<div class="language f f-a-c">
					Language:
					<div class="languageCount">{{ language }}</div>
				</div>
				<!-- From $60/Customized -->
				<div class="form">From ${{ obj.lowPrice }}/Customized</div>
				<!-- iicon -->
				<div class="icon f f-a-c">
					<div @click="shareBtn" class="iconLef f f-a-c">
						<img src="/src/assets/user/10.png" alt="" />
						Share
					</div>
					<div v-if="myId != obj.userId" @click="reports(0)" class="iconLef hand f f-a-c">
						<img src="/src/assets/user/8.png" alt="" />
						Report
					</div>
				</div>
			</div>
		</div>
		<!-- Startup -->
		<div v-for="(item, index) in port.gigsList" :key="index" class="startup">
			<div class="f f-a-c">
				<div class="startupTopLeft">
					<img @click="item.stupShow = true" v-show="!item.stupShow" src="/src/assets/user/2.png" class="jiantou hand" alt="" />
					<img @click="item.stupShow = false" v-show="item.stupShow" src="/src/assets/user/1.png" class="jiantou hand" alt="" />
				</div>
				<div class="startupTopRight f f-a-c f-j-b">
					<div class="count o-f-1">{{ item.targetedProblem }}</div>
					<div style="width: 160px" class="btn">
						<ButtonDiffuse @click="goUseCustomizeOrderTime(item, 1)" :name="'$' + item.pricing + ' / 30mins'" />
					</div>
					<!-- <div @click="goCustomize" v-else class="btns hand">Customize your order</div> -->
				</div>
			</div>
			<!-- 下面的盒子 -->
			<div v-show="item.stupShow" class="botBt">
				<div class="botBtItem">
					<div class="textar">
						{{ item.description }}
					</div>
					<div class="topics f f-a-c">
						<div class="industry">Industry: {{ item.industryName || "--" }}</div>
						<div class="topicsLef">Topics:</div>
						<div v-for="(ite, inde) in item.topicNames" class="topicsRight hand">{{ ite }}</div>
						<!-- <div class="topicsRight hand">Business branding</div>
						<div class="topicsRight hand">SaaS</div>
						<div class="topicsRight hand">Ed platform</div>
						<div class="topicsRight hand">VC</div> -->
					</div>
					<!-- iicon -->
					<div class="icon f f-a-c">
						<div @click="addInfo(4, item)" class="hand iconLef f f-a-c">
							<img v-if="item.favorite" src="/src/assets/user/12Hui.png" alt="" />
							<img v-else src="/src/assets/user/13.png" alt="" />
							{{ item.favorite ? "Added" : "Add" }}
						</div>
						<div @click="shareBtn" class="iconLef hand f f-a-c">
							<img src="/src/assets/user/10.png" alt="" />
							Share
						</div>
						<div @click="report(3, item)" class="hand iconLef f f-a-c">
							<img src="/src/assets/user/8.png" alt="" />
							Report
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Customize your order v-if="obj.hasCustomGigs" -->
		<div class="startup">
			<div class="f f-a-c">
				<div style="width: 100%" class="startupTopRight f f-a-c f-j-b">
					<div class="count o-f-1">Other topics /30min /60min</div>

					<div @click="goUseCustomizeOrderTime(item, 2)" class="btns hand">Customize your order</div>
				</div>
			</div>
		</div>
		<!-- About expert -->
		<div class="expert">
			<div class="topTit">About expert</div>
			<div class="count">
				{{ obj.myDescribe }}
			</div>
		</div>
		<!-- Professional experience -->
		<div class="expert">
			<div class="topTit">Professional experience</div>
			<div v-for="(item, index) in obj.workExperience" :key="index" class="bodyCon f f-a-c f-j-b">
				<div class="lef">{{ item.time }} {{ item.position }} @{{ item.company }}</div>
				<div class="rig">{{ item.location }}</div>
			</div>
		</div>
		<!-- Education  experience  -->
		<div class="expert">
			<div class="topTit">Professional experience</div>
			<div v-for="(item, index) in obj.educationExperience" :key="index" class="bodyCon f f-a-c f-j-b">
				<div class="lef">{{ item.school }} {{ item.degree }}</div>
				<div class="rig">{{ item.fieldOfStudy }}</div>
			</div>
		</div>
		<!-- Education  experience  -->
		<div class="expert">
			<div class="topTit">Certificate</div>
			<div class="imgBox f f-a-c f-w-w">
				<img :src="item" v-for="(item, index) in obj.certificateImages" :key="index" class="imgTou" alt="" />
			</div>
		</div>
		<!-- 评论 -->
		<div class="comment">
			<div class="topImg f f-a-c">
				<div class="startupTopLeft">
					<img @click="stupShows = true" v-show="!stupShows" src="/src/assets/user/2.png" class="jiantou hand" alt="" />
					<img @click="stupShows = false" v-show="stupShows" src="/src/assets/user/1.png" class="jiantou hand" alt="" />
				</div>
				<div class="title hand" @click="stupShows = !stupShows">Review</div>
			</div>
			<div class="xian"></div>
			<div v-show="stupShows">
				<div class="reviews hand f f-a-c f-j-b">
					<div class="reviewsLeft">All reviews</div>
					<div @click="reviewShow = !reviewShow" class="rigFilter f f-a-c">Filter<img src="/src/assets/user/11.png" class="filterImg" alt="" /></div>
					<div v-show="reviewShow" class="reviewsBox">
						<div v-for="(item, index) in port.sectList" :key="index" class="reviewsBoxitem f f-a-c">
							<div class="leftInp">
								<img src="/src/assets/user/3.png" v-if="item.show" @click="reviewCheck(item, index)" class="inpImg" alt="" />
								<img src="/src/assets/user/4.png" v-else class="inpImg" @click="reviewCheck(item, index)" alt="" />
							</div>
							<div class="rigCount">{{ item.targetedProblem }}</div>
						</div>
					</div>
				</div>
				<!-- 评论列表 -->
				<div class="commentList">
					<div v-for="(item, index) in port.reviewList" :key="index" class="oneBox">
						<!-- 一级评论 -->
						<div class="oneBoxTop f">
							<div class="avaert"><img :src="item.avatar" alt="" /></div>
							<div class="avartCount">
								<div class="name">{{ item.title }}</div>
								<div class="stars f f-a-c">
									<div class="xingxing f f-a-c">
										<img v-for="(ite, ind) in item.score" :key="ind" src="/src/assets/user/14.png" class="xingImg" alt="" />
										<img v-for="(ite, ind) in 5 - item.score" :key="ind" src="/src/assets/user/15.png" class="xingImg" alt="" />
										{{ item.score }}.0
									</div>
									<div class="hengXian"></div>
									<div class="age">{{ getTime(item.createTime) }}</div>
									<div class="genin">{{ item.firstName }}{{ item.lastName }}</div>
								</div>
								<div class="count">
									{{ item.content }}
								</div>
								<div v-if="myId != item.buyerUserId" @click="reports(1, item)" class="icon hand f f-a-c"><img src="/src/assets/user/6.png" class="iconImg" alt="" /> <span>Report</span></div>
							</div>
						</div>
						<!-- 这个是二级评论 -->
						<div class="towBoxTop f f-a-c">
							<div class="leftTop"></div>
							<!-- 右边的评论 -->
							<div class="boxRig f f-a-c">
								<div class="avacr"><img :src="item.sellerReviewRespVO?.avatar || ''" class="topImg" alt="" /></div>
								<div class="rigName">
									<div class="name">{{ item.sellerReviewRespVO?.title }}</div>
									<div class="count">{{ item.sellerReviewRespVO?.content }}</div>
									<div v-if="myId != item.sellerUserId" @click="reports(2, item)" class="icon hand f f-a-c"><img src="/src/assets/user/6.png" class="iconImg" alt="" /> <span>Report</span></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 更多 -->
				<div v-if="total > port.reviewList.length" @click="upDataList" class="showMore hand">Show more reviews</div>
				<!-- <div class="hand">
					<div class="example-pagination-block f f -a-c f-j-c">
						<el-pagination @size-change="sizeChange" @current-change="currentChange" layout="prev, pager, next" :total="1000" />
					</div>
				</div> -->
			</div>
		</div>
		<!-- 47 experts found -->
		<div class="found">
			<div class="foundTop f f-a-c f-j-b">
				<div class="foundLrft">Similar experts</div>
				<!-- <div class="foundRig f f-a-c">
					<div class="sort">Sort by</div>
					<el-dropdown max-height="200" trigger="click">
						<span class="el-dropdown-link hand">
							Price<el-icon class="el-icon--right"><arrow-down /></el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>Action 1</el-dropdown-item>
								<el-dropdown-item> Action 2 </el-dropdown-item>
								<el-dropdown-item>Action 3</el-dropdown-item>
								<el-dropdown-item>Action 4</el-dropdown-item>
								<el-dropdown-item>Action 5</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div> -->
			</div>
			<!-- /下面的列表 -->
			<div class="f f-a-c f-w-w">
				<div v-for="(item, index) in port.userList" @click.stop="goUserInfo(item, 1)" :key="index" class="financialItem hand f-s">
					<div class="topAvatr">
						<div class="topSckr f f-a-c">
							<img src="/src/assets/Star.png" class="Star" alt="" />
							<div class="strNum">{{ item.level }}/5</div>
						</div>
						<div class="avatr f f-a-c">
							<div class="leftAva"><img :src="item.avatar || ''" class="avater" alt="" /></div>
							<div class="address">
								<div class="name">{{ item.firstName }}{{ item.lastName }}</div>
								<div class="cof">{{ item.position }}</div>
								<div class="addre f f-a-c f-j-c"><img src="/src/assets/address.png" class="imgAva" alt="" />{{ item.areaName || "--" }}</div>
							</div>
						</div>
						<!-- 下方的 -->
						<div class="topice f f-a-c f-j-c">
							<div class="topTit">Topics:</div>
							<div v-for="(ite, ind) in item.topicNames" :key="ind" class="topiceBox">{{ ite }}</div>

							<!-- <div class="topiceBox">M&A</div>
							<div class="topiceBox">Rental</div>
							<div class="topiceBox">Cooperate law</div> -->
						</div>
					</div>
					<!-- count -->
					<div class="count">{{ item.myDescribe }}</div>
					<div style="width: 120px; height: 40px" class="btn">
						<ButtonDiffuse @click.stop="goUserInfo(item, 1)" :name="'From $' + item.lowPrice" />
					</div>
				</div>
			</div>
			<div @click="goIndustry" class="more boxShow hand">More</div>
		</div>
		<userModule @initObj="initObj" @initGigs="initGigs" ref="addRef" />
		<upLoad @reportObj="reportObj" ref="upLoads" />
		<xpertTabbar />
	</div>
</template>

<script setup>
	// import dayjs from "dayjs";
	import { ElMessage, dayjs } from "element-plus";
	import { getTime, copy } from "@/utils/setting";
	import relativeTime from "dayjs/plugin/relativeTime";
	import { ref, onMounted, reactive } from "vue";
	import {
		MyPageView,
		ListBySeller,
		OrderReviewList,
		CreateGigs,
		RelevanceUserList,
		QuFavoriteUser,
		CreateUserOrder,
		OrderReviewTitle,
		QuFavoriteGigs,
		CreateUser,
		FavoritePage
	} from "@/api/xpert.js";
	import { useRouter, viewDepthKey } from "vue-router";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import userModule from "./userModule.vue";
	import upLoad from "./upLoad.vue";
	let statusTab = ref(1);
	let ind = localStorage.getItem("ind");
	let obj = ref({});
	let total = ref(0);
	let joip = ref("--");
	let language = ref("");
	let route = useRouter().currentRoute;
	let stupShows = ref(true);
	let reviewShow = ref(false);
	let addRef = ref("");
	let upLoads = ref("");
	let userId = ref("");
	let title = ref("");
	let erpNUm = ref(1);
	let pageNumm = ref(1);
	let pageNumUser = ref(1);
	let reportUserIdentity = ref(1);
	let reportId = ref(""); //举报id
	let port = reactive({
		gigsList: [],
		sectList: [],
		reviewList: [],
		userList: []
	});
	// 自己的id
	let myId = JSON.parse(localStorage.getItem("logininfo")).userIdXp;
	onMounted(() => {
		console.log(window.location.href, "999999999999999999999999999999999999999999999");
		// 获取用户id
		let n = timeAgo("1713320052000");
		console.log(n, "454545");
		userId.value = route.value.query.userId;
		myPageView();
		// 获取gigs
		gigsListFn();
		// 获取评论列表
		pingList();
		// 获取下面的人物列表
		userInitList();
		// 获取筛选
		orderReviewTitle();
		window.addEventListener("scroll", handleScroll);
	});
	// 去时间预约
	const goUserInfo = (item = {}, num) => {
		// console.log(item, "111111111111111111");
		// return;
		router.replace({
			path: "/UsePersonalHome",
			query: {
				userId: item.userId
			}
		});
	};
	// 点击复制
	const shareBtn = () => {
		const text = window.location.href;
		copy(text);
	};
	// 获取gigs
	const gigsListFn = async () => {
		let n = await ListBySeller({ userId: userId.value });
		port.gigsList = n.data;
		// port.sectList = n.data;
		port.gigsList.forEach(element => {
			element.stupShow = false;
		});
	};
	// 点击去Industry
	const goIndustry = () => {
		router.push("/Industry");
	};
	const orderReviewTitle = async () => {
		let n = await OrderReviewTitle({
			userId: userId.value
		});
		port.sectList = n.data;
		port.sectList.forEach((element, index) => {
			// element.show = false;

			port.sectList[index] = { targetedProblem: element, show: false };
		});
		console.log(port.sectList, "44544554");
	};
	// 获取评论列表
	const pingList = async () => {
		let n = await OrderReviewList({
			userId: userId.value,
			title: title.value,
			pageNum: pageNumm.value
		});
		total.value = n.data.total;
		port.reviewList = [...port.reviewList, ...n.data.list];
	};
	const timeAgo = timestamp => {
		// return time.fromNow();
		const time = dayjs(timestamp);
		const now = +new Date();
		const diff = (now - timestamp) / 1000;
		console.log(diff, "111111111");
		if (diff < 60) {
			return `${diff} seconds ago`;
		} else if (diff < 3600) {
			const minutes = Math.floor(diff / 60);
			return `${minutes} ${minutes === 1 ? "minute" : "minutes"} ago`;
		} else if (diff < 86400) {
			const hours = Math.floor(diff / 3600);
			return `${hours} ${hours === 1 ? "hour" : "hours"} ago`;
		} else {
			const days = Math.floor(diff / 86400);
			return `${days} ${days === 1 ? "day" : "days"} ago`;
		}
	};
	// 举报请求
	const reportObj = async obj => {
		console.log(obj, reportId.value, "778787878787887");
		if (erpNUm.value == 1) {
			// 代表是gigs
			let n = await CreateGigs({ reportUserIdentity: ind == 3 || ind == 6 ? "1" : "2", foreignId: reportId.value, reportContent: obj.content, reportImages: obj.imgList });
			if (n.code == 200) {
				ElMessage.success(n.msg);
			}
		} else if (erpNUm.value == 2) {
			// 代表是用户
			let n = await CreateUser({ reportUserIdentity: ind == 3 || ind == 6 ? "1" : "2", foreignId: reportId.value, reportContent: obj.content, reportImages: obj.imgList });
			if (n.code == 200) {
				ElMessage.success(n.msg);
			}
		} else if (erpNUm.value == 3) {
			let n = await CreateUserOrder({ reportUserIdentity: ind == 3 || ind == 6 ? "1" : "2", foreignId: reportId.value, reportContent: obj.content, reportImages: obj.imgList });
			if (n.code == 200) {
				ElMessage.success(n.msg);
			}
		}
		upLoads.value.upLoadVisible = false;
	};
	// 点击report
	const report = (num, item) => {
		erpNUm.value = 1;
		upLoads.value.upLoadVisible = true;
		if (num == 3) {
			// 表示是gigs
			reportId.value = item.userId;
		}
	};
	// 点击评论reports
	const reports = (num, item) => {
		erpNUm.value = 2;
		upLoads.value.upLoadVisible = true;

		if (num == 1) {
			erpNUm.value = 3;
			//一级评论表示买家
			reportId.value = item.buyerUserId;
		} else if (num == 2) {
			erpNUm.value = 3;
			// 二级评论表示是卖家
			reportId.value = item.sellerReviewRespVO.sellerUserId;
		} else if (num == 0) {
			// 表示是主页用户

			reportId.value = obj.value.userId;
		}
	};
	// 个人信息
	const myPageView = async () => {
		let n = await MyPageView({ userId: userId.value });
		obj.value = n.data;
		// 语言
		language.value = obj.value.language.join(",");
		// 工作职位
		if (obj.value.workExperience[0]) {
			joip.value = obj.value.workExperience[0].position + "@" + obj.value.workExperience[0].company;
		}
	};
	const initGigs = () => {
		// 更新
		gigsListFn();
	};
	const initObj = () => {
		// 更新
		myPageView();
	};
	// 点击添加收藏
	const addInfo = async (num, item) => {
		addRef.value.num = num;
		if (num == 1) {
			addRef.value.userId = obj.value.userId;
			// 收藏用户
			if (obj.value.favorite) {
				//表示已经收藏，要做取消收藏操作
				let n = await QuFavoriteUser({ userId: obj.value.userId });
				if (n.code == 200) {
					ElMessage.success(n.msg);
					// 更新
					myPageView();
				}
			} else {
				// 打开弹出
				addRef.value.dialogTableVisible = true;
				// 表示未收藏
				// 调取收藏列表接口
				await addRef.value.initList();
			}
		} else {
			addRef.value.gigsId = item.id;
			// 收藏评论
			if (item.favorite) {
				//表示已经收藏，要做取消收藏操作
				let n = await QuFavoriteGigs({ gigsId: item.id });
				if (n.code == 200) {
					ElMessage.success(n.msg);
					// 更新
					gigsListFn();
				}
			} else {
				// 打开弹出
				addRef.value.dialogTableVisible = true;
				// 表示未收藏
				await addRef.value.initList();
			}
			// item.favorite = !item.favorite;
		}
		// obj.value.favorite = !obj.value.favorite;
	};
	// 去预约订单
	const goCustomize = () => {
		router.push("/CustomizeOrder");
	};
	// 下面的关联用户列表
	const userInitList = async () => {
		let n = await RelevanceUserList({ userId: userId.value });
		port.userList = n.data;
	};
	// 去时间预约
	const goUseCustomizeOrderTime = (item = {}, num) => {
		router.push({
			path: "/UseCustomizeOrderTime",
			query: {
				id: item.id || "",
				userId: item.userId || userId.value,
				act: num,
				title: item.targetedProblem,
				count: item.description
			}
		});
	};
	// 切换分页
	const sizeChange = e => {
		console.log(e, "1111111");
	};
	// 切换分页
	const currentChange = e => {
		console.log(e, "1111111");
	};
	// 选择
	const reviewCheck = (item, num) => {
		title.value = item.targetedProblem;
		port.sectList.forEach(element => {
			element.show = false;
		});
		port.sectList[num].show = !port.sectList[num].show;
		reviewShow.value = false;
		pageNumm.value = 1;
		reviewList.value = [];
		pingList();
	};
	// 更新
	const upDataList = () => {
		pageNumm.value++;
		pingList();
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
